<template>
  <div class="detail-base">
    <t-card :bordered="false">
      <t-descriptions title="订单信息">
        <t-descriptions-item label="订单名称">{{ order.id }}</t-descriptions-item>
        <t-descriptions-item label="订单状态"> {{ convertState(order.status) }} </t-descriptions-item>
        <t-descriptions-item label="下单用户信息">{{ order.userID }}</t-descriptions-item>
        <t-descriptions-item label="下单宠物产品">{{ order.name }}</t-descriptions-item>
        <t-descriptions-item label="订单创建时间">{{ order.createdAt }}</t-descriptions-item>
      </t-descriptions>
      <t-select-input
        :value="selectValue"
        :popup-visible="popupVisible"
        :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
        style="width: 300px; margin-left: 7px"
        placeholder="请修改订单状态"
        clearable
        allow-input
        @popup-visible-change="onPopupVisibleChange"
        @clear="onClear"
        @focus="onFocus"
        @input-change="onInputChange"
      >
        <template #panel>
          <ul class="tdesign-demo__select-input-ul-single">
            <li v-for="item in options" :key="item.value" @click="() => onOptionClick(item)">
              {{ item.label }}
            </li>
          </ul>
        </template>
        <template #suffixIcon>
          <chevron-down-icon />
        </template>
      </t-select-input>
      <t-button style="margin-left: 20px" @click="handleChange">提交修改</t-button>
    </t-card>

    <t-card :title="t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
      <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
        <t-step-item :title="t('查看订单信息')" :content="t('进行所有订单查看')" />
        <t-step-item :title="t('修改订单信息')" :content="t('修改所选中的订单信息')" />
        <t-step-item :title="t('确认修改订单')" :content="t('管理员操作确认')" />
      </t-steps>
    </t-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DetailBase',
};
</script>

<script setup lang="ts">
import axios from 'axios';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

import { OrderDetail } from '@/api/model/listModel';
import { t } from '@/locales';
import { rowForm } from '@/pages/adminModule/ordersManage/index.vue';
import router from '@/router';

const options = [
  { label: '待付款', value: 0 },
  { label: '已付款', value: 1 },
  { label: '已退款', value: 2 },
  { label: '已完成', value: 3 },
];

const selectValue = ref({ label: '', value: 4 });
const popupVisible = ref(false);
const onOptionClick = (item) => {
  selectValue.value = item;
  // 选中后立即关闭浮层
  popupVisible.value = false;
};
const onClear = () => {
  selectValue.value = undefined;
};
const onPopupVisibleChange = (val, context) => {
  console.log(context);
  popupVisible.value = val;
};
const onInputChange = (val, context) => {
  // 过滤功能
  console.log(val, context);
};

function onFocus(val, context) {
  console.log('focus:', val, context);
}

function handleChange() {
  console.log(selectValue.value);
  handleModify();
}

const handleModify = async () => {
  try {
    const query = {
      id: Number(order.id),
      status: selectValue.value.value,
    };
    console.log(query);
    const response = await axios.post('/api/admin/editOrder', query);
    if (response.status === 200 && response.data.success === true) {
      alert('修改成功');
      router.push('/adminModule/ordersManage');
    } else {
      alert('修改失败');
    }
  } catch (e) {
    console.log(e);
  }
};
// const id = ref<number | null>(null);
//
// const orderDetail = ref<OrderDetail | undefined>();

const route = useRoute();
const order = reactive<rowForm>({
  createdAt: '',
  id: 0,
  name: '',
  status: 0,
  userID: 0,
});

function convertState(state: string): string {
  switch (state) {
    case '0':
      return '待付款';
    case '1':
      return '已付款';
    case '2':
      return '已退款';
    case '3':
      return '已完成';
    default:
      return '未知状态';
  }
}
onMounted(() => {
  // id.value = Number(this.$route.query.id);
  // getOrderDetail(id.value).then((res) => {
  //   orderDetail.value = res;
  // });
  // 获取路由传递的参数
  Object.assign(order, route.query);
  console.log(order);
});
</script>

<style lang="less" scoped>
@import './index.less';
.tdesign-demo__select-input-ul-single {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 2px;
}
.tdesign-demo__select-input-ul-single > li {
  display: block;
  border-radius: 3px;
  line-height: 22px;
  cursor: pointer;
  padding: 3px 8px;
  color: var(--td-text-color-primary);
  transition: background-color 0.2s linear;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tdesign-demo__select-input-ul-single > li:hover {
  background-color: var(--td-bg-color-container-hover);
}
</style>
